import React, { memo, useEffect, useRef } from "react";
import "./index.less";
import Loading from "@/asset/img/loading.gif";

interface propsstate {
  loaddata: any;
  loading?: boolean;
  finished: boolean;
}
const Infinity1 = (props: propsstate) => {
  const { finished, loaddata } = props;
  const imgref = useRef(null);
  useEffect(() => {
    const ob = new IntersectionObserver(
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          loaddata();
        }
      },
      {
        threshold: 0.1,
      }
    );
    if (imgref.current) ob.observe(imgref.current as Element);
  }, [loaddata]);
  return (
    <div id="infinitywrap">
      {finished ? "加载完成" : <img ref={imgref} src={Loading} alt="" />}
    </div>
  );
};

export default memo(Infinity1);
